import { FC, useContext, useState } from 'react'
import classnames from 'classnames'

import QuestionList from '../../assets/questionList.json'

import './index.scss'
import { DataContext } from '../../logic/DataContext'

interface Props {
  onQuestionChange: (quesiton: ShuDuNS.QuestionItem) => void
}

// 题目选择
const QuestionSelector: FC<Props> = (props) => {
  const { onQuestionChange } = props
  const [activeQuestion, setActiveQuestion] = useState(0)
  const { finishedQuestions } = useContext(DataContext)

  // 根据 data，整一个已完成的数组
  const finishedList = finishedQuestions.map((item) => item.id)

  function handleQuestionSelect(index: number) {
    setActiveQuestion(index)
    onQuestionChange(QuestionList[index])
  }

  return (
    <div className="questionSelecter">
      {QuestionList.map((item, index) => (
        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
        <div
          className={classnames('questionItem', {
            'questionItem--active': index === activeQuestion,
            'questionItem--done': finishedList.includes(item.id)
          })}
          key={index}
          onClick={() => handleQuestionSelect(index)}
        >
          {index + 1}
        </div>
      ))}
    </div>
  )
}

export default QuestionSelector
